<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>jquery网页版扫雷小游戏</title>
	
	<script src="js/jquery.min.js"></script>
	
</head>
<style>
     html,body{
     	height: 100%;
     	transform-style:preserve-3d;
     	background: linear-gradient(to bottom,blue,#fff);
     	overflow: hidden;
     	background: url(img/bg.jpg) no-repeat;
     }
	.box{
		transform:perspective(800px) rotatex(45deg);
		width: 500px;
		height:500px;
		margin: 20px auto;
		border-top: 1px solid #B25F27;
		border-left: 1px solid #B25F27;
		box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	}
	.block{
		width: 49px;
		height: 49px;
		border-right:1px solid #B25F27;
		border-bottom:1px solid #B25F27;
		float: left;
		box-shadow: 0 0 4px #333 inset;  /*内阴影*/
		background:  url(img/cao.jpg);

	}
	.show{
		background:url(img/dilei.jpg) no-repeat;
	}
	.num{
		background: #ECD0A1;
		font-size: 18px;
		/*color: #fff;*/
		font-weight: bold;
		text-align: center;
		line-height: 49px;
	}
	.time{
		width: 50px;
		height: 50px;
		border: 1px solid red;
		text-align: center;
		line-height: 50px;
		font-size: 20px;
		font-weight: bold;
		font-family: "微软雅黑";
		position: absolute;
		right: 20px;
		top: 50px;
		background: url(img/shizhong.jpg) no-repeat;
		color: #fff;
	}
	.flagbox{
		width: 40px;
		height: 40px;
		padding: 5px;
		background: url(img/hongqi.jpg) no-repeat;
		border: 1px solid red;
		position: absolute;
		right: 20px;
		top: 120px;
		text-align:center;
		line-height: 50px;
		font-size: 20px;
		font-weight: bold;
		font-family: "微软雅黑";

	}

	.flag{
		background: url(img/hongqi.jpg) no-repeat;
	}
</style>
<script>
	$(function(){
	do{
		//用两个循环创建100个块，并且随机产生10个加一个雷的类名
		//给每个块添加位置数据 和 id属性 鼠标按下事件
		$(".box").empty();
		for(var i=0;i<10;i++){
			for(var j=0;j<10;j++){
				var islei=Math.random()>0.9;
				$("<div></div>").addClass(function(){
					return "block"+(islei? " lei":"");
				}).data("pos",{x:i,y:j}).attr("id",i+"-"+j).mousedown(mousedownhandler).appendTo(".box");
			}
		}
	}while($(".lei").length!=10);
		$(document).on("contextmenu",false);  //右击浏览器弹出窗口事件 被 contextmenu事件冲掉
		function mousedownhandler(e){
			e.preventDefault();
			if(e.which==1){                   //区分左击和右击事件
				leftclick.call(this);		  //将this指针保存到leftclick上
			}else if(e.which==3){
				rightclick.call(this);        // 将this指针保存到rightclick上
			}
		}
		function leftclick(){
			if($(this).hasClass("flag")){       //右击后不能左击
				return;
			}
			if($(this).hasClass("lei")){
				alert("你踩到地雷了!");             //左击点到雷  游戏结束
				// $(".block").filter(":not(lei)").addClass("num");
				$(".lei").addClass("show");      //所有的雷显示
			}else{
				var n=0;						 //如果点到的不是雷，显示出他旁边雷的个数
				var pos=$(this).data("pos");
				// console.log(pos.x);
				$(this).addClass("num");
				for(var i=pos.x-1;i<=pos.x+1;i++){
					for(var j=pos.y-1;j<=pos.y+1;j++){
						if($("#"+i+"-"+j).hasClass("lei")){
							n++;
						}
					}
				}
				$(this).text(n);
				if(n==0){
						for(var i=pos.x-1;i<=pos.x+1;i++){
							for(var j=pos.y-1;j<=pos.y+1;j++){
								if($("#"+i+"-"+j).length!=0){
									if(!$("#"+i+"-"+j).data("check")){
										$("#"+i+"-"+j).data("check",true);
										leftclick.call($("#"+i+"-"+j)[0]);
								}
							}
						}
					}
				}
			}
		}
		function rightclick(){
			if($(this).hasClass("num")){     //有数字的不能够再次右击
				return;
			}
			if($(this).hasClass("flag")){
				$(".flagbox").text(function(index,num){    
					num=parseInt(num);
					return ++num;
				})
			}else{
				if($(".flag").length==10){
					return;
				}
				$(".flagbox").text(function(index,num){
					num=parseInt(num);
					return --num;
				})
			}
			$(this).toggleClass("flag");     //右击切换flag类名 
			if($(".flag").filter(".lei").length==10){
					alert("Success!");
				}

		}
		var t=setInterval(function(){        //计时器
			$(".time").text(function(index,n){
				return --n;
			})
			if($(".time").text()==0){
				clearInterval(t);
				alert("时间到，游戏结束！");
			}
		},1000)



	})
</script>
<body>
	<div class="box"></div>
	<div class="flagbox">10</div>
	<div class="time">100</div>
<div style="text-align:center;">
<p><a href="#">重新开始</a></p>
</div>
</body>
</html>